<template>
  <div>
    <div class="comment-title">评论</div>
    <!-- 评论框 -->
    <div class="comment-input-wrapper">
      <div style="display:flex">
        <div style="width:100%" class="ml-3">
          <div class="comment-input">
            <textarea
              class="comment-textarea"
              v-model="content"
              placeholder="留下点什么吧..."
              auto-grow
              dense
            />
          </div>
          <!-- 操作按钮 -->
          <div>
            <button
              @click="insertComment"
              class="upload-btn v-comment-btn"
              style="margin-left:auto"
            >提交</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论详情 -->
    <div v-if="count > 0 && reFresh">
      <!-- 评论数量 -->
      <div class="count">{{ count }} 评论</div>
      <!-- 评论列表 -->
      <div
        style="display:flex"
        class="pt-5"
        v-for="(item, index) of commentList"
        :key="item.id"
      >
        <!-- 头像 -->
        <div size="40" class="comment-avatar">
          <img :src="item.avatar" />
        </div>
        <div class="comment-meta">
          <!-- 用户名 -->
          <div class="comment-user">
            <span>{{ item.nickName }}</span>
            <span class="blogger-tag" v-if="item.userId == 1">博主</span>
          </div>
          <!-- 信息 -->
          <div class="comment-info">
            <!-- 楼层 -->
            <span style="margin-right:10px">{{ count - index }}楼</span>
            <!-- 发表时间 -->
            <span style="margin-right:10px">{{ item.createTime }}</span>
            <!-- 点赞 -->
            <span :class="'cursor el-icon-caret-top ' + (item.up ? 'set' : '')" @click="like(item, 1)"/>
            <span v-show="item.upCount > 0">{{ item.upCount }}  </span>
            <!-- 点踩 -->
            <span :class="'cursor el-icon-caret-bottom ' + (item.down ? 'set' : '')" @click="like(item, 0)"/>
            <span v-show="item.downCount > 0">{{ item.downCount }}</span>
          </div>
          <!-- 评论内容 -->
          <p v-text="item.content" class="comment-content"></p>
        </div>
      </div>
    </div>
    <!-- 没有评论提示 -->
    <div v-else style="padding:1.25rem;text-align:center">
      来发评论吧~
    </div>
  </div>
</template>

<script>
  import {comment} from "@/api/blog/comment";
  import {like, cancelLike} from "@/api/blog/like";

  export default {
    props: {
      commentList: {
        type: Array
      },
      count: {
        type: Number
      }
    },
    data() {
      return {
        reFresh: true,
        blogId: this.$route.params.id,
        content: "",
        chooseEmoji: false,
        current: 1
      };
    },
    methods: {
      insertComment() {
        comment({blogId: this.blogId, content: this.content}).then(response => {
          this.$emit('reloadComment');
        });
      },
      like(item, val) {
        if (val == 1 && item.up || val == 0 && item.down) {
          this.cancelLike(item, val);
          return;
        }
        like({objType: 1, objId: item.id, isLike: val}).then(response => {
          if (val == 1) {
            item.upCount++;
            item.up = true;
          } else {
            item.downCount++;
            item.down = true;
          }
        });
      },
      cancelLike(item, val) {
        cancelLike({objType: 1, objId: item.id, isLike: val}).then(response => {
          if (val == 1) {
            item.upCount--;
            item.up = false;
          } else {
            item.downCount--;
            item.down = false;
          }
        });
      },
    },
    watch: {
      commentList() {
        this.reFresh = false;
        this.$nextTick(() => {
          this.reFresh = true;
        });
      }
    }
  };
</script>

<style scoped>
  p {
    margin-bottom: 1.25rem !important;
  }
  .blogger-tag {
    background: #ffa51e;
    font-size: 12px;
    display: inline-block;
    border-radius: 2px;
    color: #fff;
    padding: 0 5px;
    margin-left: 6px;
  }
  .comment-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 40px;
    margin-bottom: 10px;
  }
  .comment-title i {
    font-size: 1.5rem;
    margin-right: 5px;
  }
  .comment-input-wrapper {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 10px;
    margin: 0 0 10px;
  }
  .count {
    padding: 5px;
    line-height: 1.75;
    font-size: 1.25rem;
    font-weight: bold;
  }
  .comment-meta {
    margin-left: 0.8rem;
    width: 100%;
    border-bottom: 1px dashed #f5f5f5;
  }
  .reply-meta {
    margin-left: 0.8rem;
    width: 100%;
  }
  .comment-user {
    font-size: 14px;
    line-height: 1.75;
  }
  .comment-user a {
    color: #1abc9c !important;
    font-weight: 500;
    transition: 0.3s all;
  }
  .comment-nickname {
    text-decoration: none;
    color: #1abc9c !important;
    font-weight: 500;
  }
  .comment-info {
    font-size: .75rem;
    color: #b3b3b3;
  }
  .comment-textarea {
    font-size: .875rem;
    color: #555!important;
    outline: none;
    padding: 10px 5px;
    min-height: 122px;
    resize: none;
    width: 100%;
    border-radius: 4px;
    border-style: none;
    overflow: auto;
    background: url(https://static.talkxj.com/config/commentBack.webp) 100% 100% no-repeat;
  }
  .reply-btn {
    cursor: pointer;
    float: right;
    color: #ef2f11;
  }
  .comment-content {
    display: flex;
    font-size: 0.875rem;
    line-height: 1.75;
    padding-top: 0.625rem;
    margin: 0 0 16px 0;
  }
  .comment-avatar {
    height: 40px;
    min-width: 40px;
    width: 40px;
    transition: all 0.5s;
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    line-height: normal;
    position: relative;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
  }
  .comment-avatar:hover {
    transform: rotate(360deg);
  }
  .comment-avatar img {
    border-radius: inherit;
    display: inline-flex;
    height: inherit;
    width: inherit;
  }
  .like {
    cursor: pointer;
    font-size: 0.875rem;
  }
  .like:hover {
    color: #eb5055;
  }
  .like-active {
    cursor: pointer;
    font-size: 0.875rem;
    color: #eb5055;
  }
  .load-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .load-wrapper button {
    background-color: #49b1f5;
    color: #fff;
  }
  .upload-btn {
    float: right;
    border: 1px solid #ededed;
    border-color: #fff;
    border-radius: 4px;
    text-align: center;
    padding: 6px 16px;
    font-size: 14px;
    transition: all .3s;
    outline: none;
    color: #fff;
    background-color: #49b1f5;
  }
  .upload-btn:hover {
    background-color: #ff7242;
  }
  .cursor {
    cursor: pointer;
  }
  .set {
    color: orange;
  }
</style>
